import React, {FC, useContext} from 'react';
import "./HxArticleSimpleItem.less";
import classNames from "classnames";
import defaultCover from "@/assets/default_art_cover.png"
import {Flex, Image} from 'antd';
import {Link} from "umi";
import * as API from "@/services";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import {correspVal, getArticleLocationStr} from "@/utils/biz";

interface HxArticleSimpleItemProps {
  className?: string;
  showCover?: boolean;
  coverPosition?: "left" | "right";
  seq?: number;
  showTop3SeqColor?: boolean
  article?: API.FrontArticle;
}

const HxArticleSimpleItem: FC<HxArticleSimpleItemProps> = (props) => {
  const {showCover = true, showTop3SeqColor=false,coverPosition = "left", seq, article, className} = props;
  const {isZhCN} = useContext(HxConfigContext)

  const detailPath = `/journal/${article?.journal?.id || article?.journalId}/article/${article?.id}`;
  return (
    <div className={classNames("hx-article-simple-item-container", `hx-article-simple-item-container-cover-${coverPosition}`, {
      "hx-article-simple-item-container-has-cover": showCover,
    }, className)}>
      {
        seq && (
          <div className={classNames(`hx-article-simple-item-seq`, (showTop3SeqColor && seq < 4) ? `hx-article-simple-item-seq-${seq}` : undefined)}>
            {seq}
          </div>
        )
      }
      <div className={"hx-article-simple-item-inner"}>
        <div className={"hx-article-simple-item-body"}>
          <Link to={detailPath} className={"hx-article-simple-item-title"}
                dangerouslySetInnerHTML={{__html: correspVal(isZhCN, article?.articleTitleCn, article?.articleTitleEn) || ""}}>
          </Link>
          <div className={classNames("hx-article-simple-item-content")}>
            <Flex justify={"flex-end"} vertical={showCover} gap={showCover ? 8 : 0} style={{height: "100%"}}>
              <div className={"hx-article-simple-item-content-left"}>
                <div>{correspVal(isZhCN, article?.journal?.journalNameCn || article?.journalNameCn, article?.journal?.journalNameEn || article?.journalNameEn)}</div>
              </div>
              <div className={"hx-article-simple-item-content-right"}>
                {getArticleLocationStr(article)}
              </div>
            </Flex>
          </div>
        </div>
        {showCover && (
          <Link to={detailPath} className="hx-article-simple-item-cover">
            <Image src={article?.articleImageUrl} fallback={defaultCover} preview={false}/>
          </Link>
        )}
      </div>
    </div>
  );
};

export default HxArticleSimpleItem;
